<template>
	<view class="page">
		<view class="bg-yellow">
			<image mode="widthFix" class="bg-banner"  src="../static/image/banner1.png"></image>
		</view>
			
		<view class="bg-white">
			<!-- 我的账户 -->
			<view class="bg-yellow">
				<view class="">
					<view class="cu-bar tabbar bg-white" style="border-radius: 60rpx 60rpx 0 0;">
						<view class="action text-gray"></view>
						<view class="action text-gray add-action bg-yellow">
							<view class="cu-btn cuIcon-add1 shadow cu-avatar xl round" :style="'background-image:url(' + UserInfo.avator + ');'" v-if="UserInfo.avator"></view>
							<view class="cu-btn cuIcon-add1 shadow cu-avatar xl round" style="background-image:url('../../static/image/logo.png');background-color: #FFFFFF;" v-else></view>
							<view class="text-black text-lg" v-if="UserInfo.wxUserName">{{UserInfo.userName}}</view>
							<view class="text-black text-lg" @tap="getUserInfo" v-else>请先登陆</view>
						</view>
						<view class="action text-gray"></view>
					</view>
					<view class="grid text-center col-1 bg-white shadow-blur" style="padding: 50rpx 25rpx 25rpx 25rpx;">
						<view @tap="onTrialAccount">
							<view class="grid text-center col-3">
								
								<view class="text-center">
									<view class="text-lg">{{UserInfo.castMoney}} <text class="text-sm margin-lr-xs">元</text></view>
									<view class="line-grey text-sm sm">
										提现申请 >
									</view>
								</view>

								<view class="text-center" style="border-left:1px #d8d8d8 solid;border-right:1px #d8d8d8 solid;">
									<view class="text-lg">{{UserInfo.usableRbi}} <text class="text-sm"><text class="cuIcon-brand"></text></text></view>
									<view class="line-grey text-sm sm">
										获取R币 >
									</view>
								</view>
								
								<view class="text-center">
									<view class="text-lg">
										<text class="text-red" v-if="UserInfo.unreadNotice">{{UserInfo.unreadNotice}}</text>
										<text class="" v-else>0</text>
										<text class="text-sm">条未读</text>
									</view>
									<view class="line-grey text-sm sm">
										我的消息 >
									</view>
								</view>
								
							</view>
						</view>
					</view>
				</view>
			</view>
		
			<view class="">
				<!-- 分类导航 -->
				<view class="padding-xl padding-tb-xs text-sm bg-white">
					<view class="padding-xl radius text-bule text-light" style="font-size: 28rpx;">
						<view class="text-center text-red text-lg padding-xs">答题奖励</view>
						<view>1.每轮共30题,每题5分,答对计5分。选手须在限时30分钟内答完。</view>
						<view>2.每轮有5次免费查看答题解析机会。评分需要≥60分视为及格,纳入计分奖励。</view>
						<view>3.满1元即可进行提现, 微信到账。</view>
					</view>
				</view>
				
				<!-- 在线客服 -->
				<view class="cu-list menu sm-border card-menu">
					<view class="grid text-center text-black col-1 lg align-center ">
						<view class="padding-lr text-grey">
							<button class="bg-gradual-red round shadow" @tap="onStart">
								<text class="text-lg">开始答题</text>
							</button>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<model-userlogin :isShow="Http.isLogin"></model-userlogin>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				UserInfo: {
					wxUnionid: false,
					userName: null,
					shareCode: "R000000",
					usableMoney: "0.00",
					usableRbi: "0.00",
					castMoney: "0.00",
				},
				elements: [
					{
						title: '数学',
						name: 'mathematics',
						color: 'red',
						cuIcon: 'myfill'
					},
					{
						title: '字谜',
						name: 'puzzle',
						color: 'orange',
						cuIcon: 'icloading'
					},
					{
						title: '推理',
						name: 'reasoning',
						color: 'olive',
						cuIcon: 'copy'
					},
					{
						title: '成语',
						name: 'idiom',
						color: 'green',
						cuIcon: 'loading2'
					}
				],
			}
		},
		
		onShow: function() {
			let _this = this;
			_this.getUserInfo();
		},
		
		onLoad: function () {
			let _this = this;
			uni.$on("loginModel", (e)=>{
				_this.Http.isLogin = 'CLOSE';
				if('CLOSE' == e) {
					_this.getUserInfo();
				}
			});
		},
		
		methods: {
			// 结束下拉
			onPullDownRefresh() {
				
			},
			
			// 用户信息
			getUserInfo() {
				let _this = this;
				console.log("加载用户信息");
				
				// 发起请求
				_this.Http.post("my/user/info", {}, function(responseData) {
					console.log("用户信息", responseData);
					_this.UserInfo = responseData.returndata;
				});
			},
			
			// 开始答题
			onStart() {
				let _this = this;
				
				_this.Http.post("my/user/info", {}, function(responseData) {
					if(responseData.returndata && responseData.returndata.userName) {
						uni.navigateTo({
							url: 'tiku/puzzle'
						})
					}
				});
			},
			
			onTrialAccount() {
				let _this = this;
				
				_this.Http.post("my/user/info", {}, function(responseData) {
					if(responseData.returndata && responseData.returndata.userName) {
						let _token = uni.getStorageSync('token');
						_this.Weixin.launchTrialMiniProgram("pages/my/bind/bind?token=" + _token);
					}
				});
			}
		}
	}
</script>

<style>
	body, page, .page {
		background-color: #ffffff;
		min-height: 100vh;
	}
	
	.bg-banner {
		width: 100vw;
	}

	.bg-gradual-pink {
		background-image: linear-gradient(0deg, #ec008c, #6739b6);
		color: #ffffff;
	}
	
	.bg-gradual-green {
		background-image: linear-gradient(0deg, #39b54a, #8dc63f);
		color: #ffffff;
	}

	.bg-gradual-yellow {
		background-image: linear-gradient(0deg, #fbbd08, #ffffff);
		color: #ffffff;
	}
	
	.kefubtn {
		background-color: #ffffff;
		display: inline;
		margin: 0;
		padding: 0;
		border-color: #ffffff;
		font-size: 16px;
	}
	
	.kefubtn::after {
		border: 0;
	}

	.iconfont.icon-huhuan {
		font-size: 50rpx;
	}
	
	.solid-bottom.text-xsl {
		font-size: 100rpx;
	}
	
	.cu-bar.tabbar .action.add-action::after {
	    content: "";
	    position: absolute;
	    width: 160rpx;
	    height: 160rpx;
	    top: -90rpx;
	    margin: auto;
	    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.08);
	    border-radius: 160rpx;
	    background-color: inherit;
	    z-index: 0;
	}
	
	.cu-bar.tabbar .action.add-action [class*="cuIcon-"] {
	    position: absolute;
	    width: 150rpx;
	    z-index: 2;
	    height: 150rpx;
	    border-radius: 50%;
	    line-height: 150rpx;
	    top: -88rpx;
	    left: 0;
	    right: 0;
	    margin: auto;
	    padding: 0;
	}
	
	.cu-bar.tabbar .action.add-action {
	    position: relative;
	    z-index: 3;
	    padding-top: 70rpx;
	}
</style>
